<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  .active {
    color: red;
  }
  .line {
    color: blue;
  }
</style>
<body>
<div id="app">
<!--  <h2 class="active">{{ message }}</h2>-->
<!--  <h2 :class="active">{{ message }}</h2>-->
<!--对象语法 {}-->
  <h2 class="title" v-bind:class="{active: isActive, line: isLine}" @click="btnclick">{{message}}</h2>
  <h2 class="title" v-bind:class="getClasses()" @click="btnclick">{{message}}</h2>

</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好",
      active: "active",
      isActive: true,     //通过变量来决定要不要加class
      isLine: false,
    },
    methods: {
      btnclick () {
        this.isActive = !this.isActive
        this.isLine = !this.isLine
      },
      getClasses () {
        return {active: this.isActive, line: this.isLine}
      }
    }
  })
</script>
</body>
</html>
